<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh" v-if="Object.values(data).length != 0">
      <view class="teacherinfo">
        <image :src="imgUrl + data.avatar" mode="aspectFill" style="width: 100rpx; height: 100rpx; border-radius: 100rpx"></image>
        <view class="right">
          <view class="top">
            <view style="display: flex; align-items: center">
              <text>{{ data.byname }}</text>
              <!-- src="data.gender == 1 ? "../../static/icon/nv.png" : "../../static/icon/nan.png"" -->
              <image :src="data.gender == 1 ? '../../static/icon/nv.png' : '../../static/icon/nan.png'" mode="aspectFill" style="width: 42rpx; height: 42rpx"></image>
            </view>
            <view style="display: flex; align-items: center">
              <view v-if="isshow" style="width: 150rpx; height: 50rpx; text-align: center; line-height: 50rpx; font-size: 26rpx; background-color: #fff" @click="lahei">
                {{ blackswich ? '拉黑' : '取消拉黑' }}
              </view>
              <view @click="isshow = !isshow">...</view>
            </view>
          </view>
          <view class="bottom">
            <view style="display: flex; align-items: center">
              <view class="career">{{ data.identity_name }}</view>
              <view class="teachtime">授课{{ data.teaching_num }}课时</view>
            </view>
            <view class="timeage">教龄{{ data.teaching_len }}年</view>
          </view>
        </view>
      </view>
      <!-- 教师资料 -->
      <view class="title">教师资料</view>
      <swiper :indicator-dots="true" indicator-active-color="#3553E8" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-if="data.video != ''">
          <view class="swiper-item" style="width: 710rpx; height: 300rpx; border-radius: 20rpx; overflow: hidden">
            <video :src="imgUrl + data.video" style="width: 100%; height: 100%"></video>
          </view>
        </swiper-item>
        <swiper-item v-for="(item, index) in data.person_pic" :key="index">
          <view class="swiper-item" style="width: 710rpx; height: 300rpx; border-radius: 20rpx; overflow: hidden">
            <image :src="imgUrl + item" mode="aspectFill" style="width: 100%; height: 100%"></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 教学类别 -->
      <view class="title">教学类别</view>
      <view class="liebiebox">
        <view class="liebiaoitem">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #3553e8">主教</view>
          <view style="margin-top: 20rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #222222">
            {{ data.host_grade + '-' + data.host_subject }}
          </view>
        </view>
        <view style="width: 0; height: 100rpx; border-left: 4rpx solid #e3e3e3" v-show="data.assist_subject != ''"></view>
        <!-- v-show="data.assist_subject != ''" -->
        <view class="liebiaoitem">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #3553e8" v-show="data.assist_subject != ''">辅教</view>
          <view style="margin-top: 20rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #222222" v-show="data.assist_subject != ''">
            {{ data.assist_grade + '-' + data.assist_subject }}
          </view>
        </view>
      </view>
      <!-- 教学经历 -->
      <view class="title">教学经历</view>
      <view class="teachexp">
        <view v-for="item in data.teacher_see" :key="item.id" style="margin-bottom: 20rpx">
          <view style="display: flex; align-items: center; margin-bottom: 20rpx">
            <view style="width: 16rpx; height: 16rpx; background-color: #3553e8; border-radius: 50%"></view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #222222; margin-left: 14rpx">{{ item.teaching_title }}</view>
          </view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #666666">
            {{ item.teaching_career }}
          </view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #333333; margin-top: 20rpx">
            {{ item.teaching_start + '至' + item.teaching_end }}
          </view>
        </view>
      </view>
      <!-- 成功案例 -->
      <view class="title">提分案例</view>
      <view class="teachexp">
        <view>
          <view style="display: flex; align-items: center; margin-bottom: 20rpx">
            <view style="width: 16rpx; height: 16rpx; background-color: #3553e8; border-radius: 50%"></view>
            <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 28rpx; color: #222222; margin-left: 14rpx">{{ data.case_title }}</view>
          </view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #666666">
            {{ data.case_content }}
          </view>
        </view>
      </view>
      <!-- 所获荣誉 -->
      <view class="title">所获荣誉</view>
      <view class="ry">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #333333">{{ data.honors }}</view>
      </view>
      <!-- 学生评论 -->
      <view class="title">学员评价{{ '(' + data.order_evaluates_count + ')' }}</view>
      <view class="pllist">
        <view
          style="display: flex; align-items: center; padding-bottom: 30rpx; border-bottom: 2rpx solid #f1f1f1; padding-top: 24rpx"
          v-for="item in data.order_evaluates"
          :key="item.id"
        >
          <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 80rpx; height: 80rpx"></image>
          <view style="flex: 1; margin-left: 20rpx">
            <view class="name">{{ item.username }}</view>
            <view class="pinglun">{{ item.content }}</view>
          </view>
        </view>
      </view>
      <!-- 教师列表 -->
      <view class="teacherlist">
        <view class="listitem" v-for="item in list" :key="item.id" @click="godetail(item.id)">
          <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
          <view class="right">
            <view class="righttop">
              <view style="display: flex; align-items: center">
                <view class="username">{{ item.byname }}</view>
                <view class="usercareer">{{ item.identity_name }}</view>
              </view>
              <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ item.host_grade + '-' + item.host_subject }}</view>
            </view>
            <view class="rightmiddel">
              <view class="teachage">教龄{{ item.teaching_len }}年</view>
              <view class="money">￥{{ item.price }}/起</view>
            </view>
            <view class="rightbottom">
              <view class="hobbylist" v-if="item.keyword.length != 0">
                <view class="hobbyitem" v-for="(item2, index) in item.keyword" :key="index">{{ item2 }}</view>
              </view>
              <view class="long">{{ item.distance }}km</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 收藏、分享、上课预约 -->
      <view style="display: flex; align-items: center">
        <view @click="fncollect" class="yuyueitem" style="margin-right: 30rpx">
          <image
            :src="`${data.followIs == 0 ? '../../static/icon/collect.png' : '../../static/icon/collectact.png'}`"
            mode="aspectFill"
            style="width: 40rpx; height: 40rpx"
          ></image>
          <view>收藏</view>
        </view>
        <view class="yuyueitem">
          <view>
            <button open-type="share" style="height: 80rpx; line-height: 40rpx">
              <image src="../../static/icon/share.png" mode="aspectFill" style="display: block; width: 40rpx; height: 40rpx; margin-left: 10rpx"></image>
              <text style="display: block">分享</text>
            </button>
          </view>
        </view>
        <view class="yuyue" @click="goyuyue">上课预约</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  onShareAppMessage() {
    return {
      title: '教师分享',
      imageUrl: '/static/img/logo.png',
      path: '/parents/teacherdetail/teacherdetail?id=' + this.currentId
    };
  },
  data() {
    return {
      collect: false,
      isshow: false,
      currentId: '', // 当前的教师id
      data: {}, // 教师详情的数据
      imgUrl: '', // 图片的基地址
      list: [], // 推荐教师列表
      blackswich: true
    };
  },
  methods: {
    //  跳转到教师详情
    godetail(id) {
      uni.redirectTo({
        url: '/parents/teacherdetail/teacherdetail?id=' + id
      });
    },
    // 获取教师详情
    async getdetail(id) {
      const res = await uni.$http.post('/patriarch/details', {
        teacher_id: id
      });
      this.data = res.data.data;
      // console.log('教师详情的数据', this.data);
    },
    // 获取推荐教师列表
    getrtuijian(id) {
      uni.getLocation({
        success: async (res) => {
          const res2 = await uni.$http.post('/patriarch/getTeacherList', {
            teacher_id: id,
            lat: res.latitude,
            lon: res.longitude
          });
          // console.log('返回的推荐教师列表', res2);
          this.list = res2.data.data;
        }
      });
      // uni.$http.post('');
    },
    // 收藏教师
    async fncollect() {
      this.collect = !this.collect;
      const res = await uni.$http.post('/follow/add', {
        type: '2',
        teacher_id: this.currentId
      });
      // console.log('收藏的返回值', res);
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
        if (res.data.msg == '收藏成功') {
          this.data.followIs = 1;
        } else {
          this.data.followIs = 0;
        }
      }
    },
    // 拉黑教师
    async lahei() {
      this.blackswich = !this.blackswich;
      const res = await uni.$http.post('/black/add', {
        type: '1',
        black_people: this.currentId
      });
      if (res.data.code == 1) {
        return uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
    },
    // 跳转到上课预约
    goyuyue() {
      uni.navigateTo({
        url: '/parents/skyuyue/skyuyue?id=' + this.currentId
      });
    }
  },
  onLoad(e) {
    console.log('详情页的数据', e);
    this.currentId = e.id;
    this.getdetail(e.id);
    // 图片的基地址
    this.imgUrl = this.imgurl;
    // 获取教师推荐列表
    this.getrtuijian(e.id);
  }
};
</script>

<style lang="scss" scoped>
button {
  box-sizing: border-box;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 30rpx;
  padding: 0;
  margin: 0;
  border: none !important;
}
button::after {
  border: none !important;
}
.container {
  box-sizing: border-box;
  padding: 30rpx 20rpx;

  .button-hover {
    background-color: transparent !important;
  }
  .address {
    box-sizing: border-box;
    width: 710rpx;
    height: 146rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-bottom: 32rpx;
    .addressbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 710rpx;
      height: 146rpx;
    }
  }
  .yuyue {
    box-sizing: border-box;
    flex: 1;
    width: 476rpx;
    height: 80rpx;
    margin-left: 52rpx;
    text-align: center;
    line-height: 80rpx;
    color: #ffffff;
    background: #3553e8;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  .yuyueitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .teacherinfo {
    display: flex;
    box-sizing: border-box;
    width: 710rpx;
    height: 164rpx;
    padding: 30rpx;
    background: #f1f3ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .right {
      flex: 1;
      margin-left: 20rpx;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12rpx;
        .career {
          box-sizing: border-box;
          width: 104rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          background: #dee2fd;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #3553e8;
          margin-right: 16rpx;
        }
        .teachtime {
          box-sizing: border-box;
          width: 128rpx;
          height: 32rpx;
          text-align: center;
          line-height: 32rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #222222;
          background: #ffffff;
        }
        .timeage {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #222222;
        }
      }
    }
  }
  .title {
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    padding-left: 12rpx;
    color: #222222;
    border-left: 8rpx solid #3553e8;
    margin: 20rpx 0;
  }
  .liebiebox {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    // justify-content: space-evenly;
    width: 710rpx;
    height: 160rpx;
    background: #f9f9f9;
    border-radius: 20rpx;
    border: 2rpx solid #f1f1f1;
    .liebiaoitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 90rpx;
    }
  }
  .teachexp {
    box-sizing: border-box;
    width: 710rpx;
    padding: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
  }
  .ry {
    box-sizing: border-box;
    width: 710rpx;
    background: #f9f9f9;
    padding: 30rpx;
    border-radius: 20rpx;
    border: 2rpx solid #f1f1f1;
  }
  .pllist {
    box-sizing: border-box;
    width: 710rpx;
    // height: 424rpx;
    background: #f9f9f9;
    padding: 30rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
    }
    .pinglun {
      width: 528rpx;
      margin-top: 4rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #666666;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .teacherlist {
    padding: 30rpx 0;
    .listitem {
      box-sizing: border-box;
      display: flex;
      width: 710rpx;
      height: 190rpx;

      margin-bottom: 30rpx;
      .right {
        flex: 1;
        margin-left: 20rpx;
        .righttop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .usercareer {
            box-sizing: border-box;
            width: 104rpx;
            height: 40rpx;
            background: #eaedfd;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            text-align: center;
            line-height: 40rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .username {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            margin-right: 14rpx;
          }
        }
        .rightmiddel {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 12rpx;
          .teachage {
            font-weight: 500;
            font-size: 26rpx;
            color: #222222;
          }
          .money {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #ff3400;
          }
        }
        .rightbottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 40rpx;
          .hobbylist {
            display: flex;
            align-items: center;
            .hobbyitem {
              box-sizing: border-box;
              height: 40rpx;
              background: #ffffff;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              border: 1rpx solid #3553e8;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #3553e8;
              margin-right: 10rpx;
              text-align: center;
              line-height: 30rpx;
              padding: 4rpx 12rpx;
              text-overflow: ellipsis; /* 溢出显示省略号 */
              overflow: hidden; /* 溢出隐藏 */
              white-space: nowrap; /* 强制不换行 */
            }
          }
          .long {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #222222;
          }
        }
      }
    }
  }
}
</style>
